<template>
    <el-dialog
            title="瓦片服务参数填写"
            :visible.sync="spatialVisible"
            :close-on-click-modal="false"
            width="88%"
            top="2%"
            v-dialogDrag
            v-loading="loading"
            style="margin-top: 1px"
            id="spatialDialog">
        <div style="margin-top: 8%;margin-left: 30%;height:350px">
            <el-row class="step">
                <span style="font-size: 20px;">请填写图层名称：</span>
                <el-input v-model="layerName" clearable style="margin-left: 4%;width: 50%"
                          placeholder="请输入内容"></el-input>
            </el-row>
            <el-row class="step">
                <span style="font-size:20px;">请填写波段编号：</span>
                <el-input v-model="band" clearable style="margin-left: 4%;width: 50%"
                          placeholder="请输入内容"></el-input>
            </el-row>
            <!--<el-row class="step">-->
                <!--<span style="font-size: 20px;">请填写波段信息：</span>-->
                <!--<el-input v-model="topic" clearable style="margin-left: 4%;width: 50%"-->
                          <!--placeholder="请输入内容"></el-input>-->
            <!--</el-row>-->
            <el-row class="step">
                <span style="font-size:20px;">请填写关键字段：</span>
                <el-input v-model="keywords" clearable style="margin-left: 4%;width: 50%"
                          placeholder="请输入内容"></el-input>
            </el-row>
        </div>
        <span slot="footer" class="dialog-footer">
             <el-button tyle="margin-top: 12px;" @click="confirm">确定</el-button>
             <el-button tyle="margin-top: 12px;" @click="cancel">取消</el-button>
        </span>
    </el-dialog>

</template>

<script>

    export default {
        name: "tiffServiceDialog",
        // props: ['loaderTableData'],
        data() {
            return {
                layerName: '',
                band: '',
                topic: 'CC,CString',
                keywords: '',
                input:'',
                loading: false,
                spatialVisible: false,

            }
        },
        props: {},
        computed: {},
        methods: {


            cancel() {
                this.spatialVisible = false;
                this.layerName = '',
                    this.band = '';
                this.topic = '';
                this.keywords = '';

            },

            //确认开始切瓦片
            confirm() {
                let that=this;
                let postdata={};
                postdata.input=this.input;
                postdata.layerName=this.layerName;
                postdata.bands=this.band;
                postdata.topic=this.topic;
                postdata.keywords=this.keywords;
                this.$axios.post(that.$URL.tiffServiceUrl, postdata).then(function (res) {
                    if (res.code === 200) {
                        that.loading = false;
                        that.spatialVisible = false;
                        that.layerName = '',
                            that.band = '';
                        that.topic = '';
                        that.keywords = '';
                        // that.$router.push({
                        //     name: 'personalDataMonitor'
                        // });
                        that.$message({
                            type: 'success',
                            message: '瓦片服务已经开始，请到用户服务界面查看'
                        });

                    }else{
                        that.loading = false;
                        that.spatialVisible = false;
                        // that.$router.push({
                        //     name: 'personalDataMonitor'
                        // });
                        that.$message({
                            type: 'error',
                            message: '瓦片服务失败'
                        });
                    }
            })
            },
        }
        ,
        created() {
            let that = this;
            this.$Bus.$on('tiffServiceVisible', params => {
                that.spatialVisible = params.visible;
                that.input = params.path;
                that.layerName = params.fileName.substring(0, params.fileName.indexOf('.'));
            });

        }
        ,
        mounted() {

        }
    }
</script>

<style>
    .step {
        margin: 20px
    }


    #spatialDialog .el-dialog__body {
        overflow: hidden;
    }

</style>